<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lookmessage/css/lookmessage.css">

    <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="icon" href="message/img/favicon.ico" type="image/x-icon"/>

    <link rel="icon" href="../static/message/img/favicon.ico" type="image/x-icon" th:href="@{/message/img/favicon.ico}"/>

    <link rel="stylesheet" href="../static/message/css/message.css" th:href="@{/message/css/message.css}">

    <link rel="stylesheet" type="text/css" href="../static/css/header.css" th:href="@{/css/header.css}">

    <link rel="stylesheet" type="text/css" href="../static/css/layout.css" th:href="@{/css/layout.css}">

    <script src="../../static/js/header.js" th:src="@{/js/header.js}"></script>
</head>

<body style="background-color: white">
<div id="app">

    <div th:replace="common/header :: header"></div>
    <div id="message">

        <!--<div class="PU_header">-->
            <!--<div class="header_img">-->
                <!--<img src="message/img/logo.png" style="margin-top:8px;height: 30px;width: 61px;">-->
            <!--</div>-->
            <!--<div class="header_search">-->
                <!--<input type="text" class="zu-top-search-input" id="q" name="q" autocomplete="off" value=""-->
                       <!--maxlength="100"-->
                       <!--placeholder="搜索你感兴趣的内容…" role="combobox" aria-autocomplete="list" style="float: left">-->
                <!--<button style="width:10%;height: 100%;float: left; background: linear-gradient(to bottom,#0e7bef,#0d73da);border: 1px solid #045bb2;box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 1px 1px rgba(255,255,255,.15);">-->
                    <!--<img src="message/img/search.png" style="width: 100%;height: 70%;">-->
                <!--</button>-->
            <!--</div>-->
            <!--<div class="header_link">-->
                <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--<span>首页</span>-->
                <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--<span>话题</span>-->
                <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--<span>发现</span>-->
                <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                <!--<span>消息</span>-->
            <!--</div>-->

            <!--<div class="header_ask">-->
                <!--<button class="header_ask_button">-->
                    <!--提问-->
                <!--</button>-->
            <!--</div>-->
            <!--<div class="header_mine">-->
                <!--<img src="message/img/mine.png" style="float: left;height: 32px;width: 32px;border-radius: 3px">-->
                <!--<span class="header_mine_name" id="top"></span>-->
            <!--</div>-->
        <!--</div>-->
        <div class="PU_content" style="margin-left: 400px;width: 50%;">
            <!--            返回-->
            <div class="content_return">
                <a href="http://localhost:8080/message" style="color: #259;">&lt;&lt;返回</a>
            </div>
            <!--            输入框-->

            <div class="content_box">
                <div class="content_title">
                    <span class="send_message">发私信给</span> <span  style="color: #666;" id="username"></span>
                </div>
                <div class="content_input">
                    <form role="form">
                        <div class="form-group">
                            <textarea id="content" class="form-control" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="content_send">
                    <button class="content_send_send" onclick="sendMessage()" >发送</button>
                </div>
            </div>
            <!--            历史消息-->
            <div>
                <!--       一个message            -->
                <div class="information" v-for="(message,index) in messages.data" v-model="messages[index]">
                    <!-- message左侧 -->
                    <div class="information_left">
                        <div class="information_left_img">
                            <img style="width: 100%;height: 100%;" v-bind:src="message.dp">
                        </div>
                    </div>
                    <!-- message右侧 -->
                    <div class="information_right">
                        <div class="information_right_author">
                            <span class="information_right_author_text">{{message.sendername}}</span>:亲爱的&nbsp;{{message.receivername}}
                        </div>
                        <!-- 右侧text -->
                        <div class="information_right_text">
                            {{message.content}}
                        </div>
                        <!-- 右侧底部操作 -->
                        <div class="information_right_bottom">
                            <!-- 时间 -->
                            <div class="information_right_bottom_time">
                                {{message.ctreatetime}}
                            </div>
                            <!-- 右下角操作 -->
                            <div class="information_right_bottom_do">


                                <a style="color: rgb(105, 142, 191);">
                                    &nbsp;回复&nbsp;
                                </a>

                                <span style="color: rgb(187, 187, 187);">
                                    |
                                </span>
                                <a href="javascript:void(0)" style="color: rgb(105, 142, 191);" @click="deleteMessage(message.id)">
                                    &nbsp;删除
                                </a>

                            </div>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <!--       一个message            -->
            </div>
        </div>

        <div class="PU_footer">
            <div class="footer_zhihu">
                @2019知乎
            </div>
            <div class="footer_linktitle">
                <a href="https://liukanshan.zhihu.com/">刘看山</a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/question/19581624">知乎指南</a> &nbsp;•&nbsp;
                <a href="#">
                    建议反馈
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/app/">
                    移动应用
                </a> &nbsp;•&nbsp;
                <a href="https://app.mokahr.com/apply/zhihu/3819">
                    加入知乎
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/terms">
                    知乎协议
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/jubao">
                    举报投诉
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/term/privacy">
                    隐私政策
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/contact">
                    联系我们
                </a>
            </div>
        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-3.4.1.js " integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin=" anonymous "></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js "></script>
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/axios.min.js"></script>

<script src="http://how2j.cn/study/fetch.min.js"></script>


<script>
    window.onload = function () {


        var url = window.location.search;

        var request = new Object();

        if (url.indexOf("?") != -1) {
            <!--判断是否存在，如果返回-1，则表明不存在-->

            var str = url.substr(1);
            <!--从第1个字符开始截取-->

            var strs = str.split("&");
            <!--表示以“&’”为分隔符进行分隔，返回的是一个数组-->

            for (var i = 0; i < strs.length; i++) {
                request[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
        }

        if(sessionStorage.getItem("swi")!="1"){
            sessionStorage.setItem("swi","1");
            window.location=("http://localhost:8080/lookmessage?senderid="+request["senderid"]+"&receiverid="+request["receiverid"]);
        }




        if(sessionStorage.getItem("senderid")===$.cookie("zhihuid")){
            getUsernameById(request["receiverid"])
            $('#top').text(request["senderid"])
            sessionStorage.setItem("senderid",request["receiverid"]);
            sessionStorage.setItem("receiverid",request["senderid"])

        }
        else{
            getUsernameById(request["senderid"])
            $('#top').text(request["receiverid"])
            sessionStorage.setItem("senderid",request["senderid"]);
            sessionStorage.setItem("receiverid",request["receiverid"])
        }


        // alert("senderid=" + request["senderid"]);
        // alert("receiverid=" + request["receiverid"]);
    };
    function getUsernameById(id) {
        $.ajax({
            type:"post",
            data:{
                "id":id
            },
            url:"http://localhost:8080/getUsernameById",
            success:function (result) {
                $('#username').text(result.data)
            }
        })
    }

    function deleteMessage(id){

        $.ajax({
            type:"post",
            data: {
                "id" : id
            },
            url:"http://localhost:8080/deleteMessage",
            success:function (result) {
                sessionStorage.setItem("swi","0");
                window.location.reload("http://localhost:8080/lookmessage?senderid="+sessionStorage.getItem("senderid")+"&receiverid="+sessionStorage.getItem("receiverid"));
            }


        })
    }
    var returnMessageUrl = "http://localhost:8080/getReturnMessage?senderid="+sessionStorage.getItem("senderid")+"&receiverid="+sessionStorage.getItem("receiverid");

    function sendMessage(){
        var senderid = sessionStorage.getItem("receiverid");
        var receiverid = sessionStorage.getItem("senderid");

        var content = document.getElementById("content").value;

        $.ajax({
            type:"post",
            data:{
                "senderid":senderid,
                "receiverid":receiverid,
                "content":content
            },
            url:"http://localhost:8080/sendMessage",
            success:function (result) {
                sessionStorage.setItem("swi","0")
                window.location=("http://localhost:8080/lookmessage?senderid="+senderid+"&receiverid="+receiverid);

            }
        })
    }

    new Vue({
        el: '#app',
        data: {
            messages: []
        },
        created: function () {
            // if(sessionStorage.getItem("swi")!='1'){
            //     sessionStorage.setItem("swi",'1');
            //     window.location=("http://localhost:8080/lookmessage.html");
            // }
            autodivheight();

            function autodivheight() { //函数：获取尺寸
                //获取浏览器窗口高度
                var winHeight = 0;
                if (window.innerHeight)
                    winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                    winHeight = document.body.clientHeight;
                //通过深入Document内部对body进行检测，获取浏览器窗口高度
                if (document.documentElement && document.documentElement.clientHeight)
                    winHeight = document.documentElement.clientHeight;
                //DIV高度为浏览器窗口的高度
                document.getElementById("message").style.height = winHeight + "px ";
            }

            window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度

            self = this
            fetch(returnMessageUrl).then(function (response) {
                response.json().then(function (jsonObject) {
                    self.messages = jsonObject
                })
            }).catch(function (err) {
                console.log("Fetch错误:" + err);
            })
        },
        mounted: {
            // lookmessage: function (senderid, receiverid) {
            //     var url = "http://localhost:8080/lookmessage.html?receiverid=" + receiverid + "&senderid=" + senderid;
            //     window.location = url;
            //
            // }
        }

    })

</script>

</body>

</html>